import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';

class MyDate extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyDateState();
}

class MyDateState extends State {
  var now = DateTime.now();
  var nowTime = TimeOfDay(
    hour: 12,
    minute: 30,
  );

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = TextStyle(color: Colors.white, fontSize: 16.0);

    return Scaffold(
      appBar: AppBar(title: Text('MyDate')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                splashColor: Colors.yellow,
                borderRadius: BorderRadius.all(Radius.circular(20)),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Text('${formatDate(now, [yyyy, ' 年 ', mm, ' 月 ', dd])}'),
                      Icon(Icons.arrow_drop_down)
                    ],
                  ),
                ),
                onTap: () {
                  this._showDatePicker();
                },
              ),
              InkWell(
                splashColor: Colors.yellow,
                borderRadius: BorderRadius.all(Radius.circular(20)),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Text('${nowTime.hour} : ${nowTime.minute}'),
                      Icon(Icons.arrow_drop_down)
                    ],
                  ),
                ),
                onTap: () {
                  this._showTimePicker();
                },
              ),
            ],
          ),
          SizedBox(height: 50),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                splashColor: Colors.yellow,
                borderRadius: BorderRadius.all(Radius.circular(20)),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Text('${formatDate(now, [yyyy, ' 年 ', mm, ' 月 ', dd])}'),
                      Icon(Icons.arrow_drop_down)
                    ],
                  ),
                ),
                onTap: () {
                  this._showDatePicker();
                },
              ),
              InkWell(
                splashColor: Colors.yellow,
                borderRadius: BorderRadius.all(Radius.circular(20)),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    children: [
                      Text('${nowTime.hour} : ${nowTime.minute}'),
                      Icon(Icons.arrow_drop_down)
                    ],
                  ),
                ),
                onTap: () {
                  this._showTimePicker();
                },
              ),

            ],
          ),
        ],
      ),
    );
  }

  //  改变日期
  _showDatePicker() async {
    var time = await showDatePicker(
      context: context,
      initialDate: now,
      firstDate: DateTime(1992),
      lastDate: DateTime(2021),
    );
    if (time != null) {
      this.setState(() {
        now = time;
      });
    }
  }

  // 改变当前时间
  _showTimePicker() async {
    var time = await showTimePicker(
      context: context,
      initialTime: nowTime,
    );
    if (time != null) {
      this.setState(() {
        this.nowTime = time;
      });
    }
  }
}
